<template>
  <div class="monitoring-focus-container">
    <!-- 字段过滤 -->
    <div class="options-select-container clearfix">
      <div class="select-item time fl">
        <span class="select-title">时态：</span>
        <select name="" id="" placeholder="请选择">
          <option>全部</option>
        </select>
        <span class="select-icon"></span>
      </div>
      <div class="select-item level fl">
        <span class="select-title">等级：</span>
        <select name="" id="" placeholder="请选择">
          <option>全部</option>
        </select>
        <span class="select-icon"></span>
      </div>
    </div>

    <!-- 展示列表 -->
    <div class="prevent-wrapper">
      <div class="prevent-list">
        <div class="prevent-item" v-if="index >= currentIndex" v-for="(c, index) in data">
          <img class="block" :src="c.image" alt="">
          <div class="level-icon" :class="{'level-one': c.level === 1, 'level-two': c.level === 2, 'level-three': c.level === 3}"></div>
          <ul class="operation-list clearfix">
            <li class="operation-item fl camera active" v-if="c.operation.camera"></li>
            <li class="operation-item fl huanjing" v-if="c.operation.huanjing"></li>
            <li class="operation-item fl location" v-if="c.operation.location"></li>
            <li class="operation-item fl sanwei" v-if="c.operation.sanwei"></li>
          </ul>
          <div class="prevent-place-name">
            {{ c.name }}
          </div>
        </div>
      </div>
    </div>

    <!-- 控制移动 -->
    <template v-if="showMove">
      <div class="move move-left cursor__pointer" @click="addItem(-1)"></div>
      <div class="move move-right cursor__pointer" @click="addItem(1)"></div>
    </template>
  </div>
</template>

<script>
  export default {
    props: {
      data: {
        type: Array,
        default: () => [],
      },
      expand: {
        type: Boolean,
        default: false,
      }
    },
    computed: {
      itemLength () {
        return this.data.length;
      },
      limit () {
        return this.expand ? 6 : 3;
      },
      showMove () {
        return this.itemLength > this.limit;
      },
    },
    data () {
      return {
        currentIndex: 0,
      }
    },
    methods: {
      addItem (change) {
        const t = this;
        const current = t.currentIndex;
        const limit = t.limit;
        const itemLength = t.itemLength;

        if (change > 0 && current === (itemLength - limit - 1)) return
        if (change < 0 && current ===0) return;

        t.currentIndex = current + change;
      }
    }
  }
</script>

<style lang="scss">
  .monitoring-focus-container {
    position: relative;
    height: 112px;
    padding: 8px 18px 0;
    color: #fff;
    background:linear-gradient(180deg, rgba(1,138,244,0.21), transparent);

    .select-item {
      position:relative;
      line-height: 0;

      .select-title {
        margin-right: 13px;
        font-size: 7px
      }

      select {
        width: 37px;
        height: 12px;
        padding: 0 4px;
        background: rgba(64,214,246,.1);
        border-radius: 2px;
        border-color: rgba(64,214,246,1);
        color: #fff;
        outline: none;
        appearance:none;
      }

      .select-icon {
        position: absolute;
        top: 50%;
        right: 2px;
        width: 4px;
        height: 3px;
        background-image: url("~assets/images/select-icon.png");
        background-size: 100% 100%;
        transform: translate(-100%, -50%);
      }

      &.time {
        margin-right: 29px;
      }
    }

    .prevent-wrapper {
      position: relative;
      margin-top: 6px;
      overflow: hidden;

      .prevent-list {
        position: relative;
        display: flex;
        transition: left .4s;

        .prevent-item {
          position: relative;
          width: 143px;
          height: 91px;
          flex-shrink: 0;
          margin-right: 8px;

          .level-icon {
            position: absolute;
            top: 0;
            left: 0;
            width: 25px;
            height: 25px;
            background-size: 100% 100%;

            /*span {*/
            /*  display: inline-block;*/
            /*  font-size: 6px;*/
            /*  color: #000;*/
            /*  transform: rotate(45deg);*/
            /*}*/

            &.level-one {
              background-image: url('~assets/images/level-one.png');
            }

            &.level-two {
              background-image: url('~assets/images/level-two.png');
            }

            &.level-three {
              background-image: url('~assets/images/level-three.png');
            }
          }

          .prevent-place-name {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 24px;
            font-size: 7px;
            text-align: center;
            line-height: 24px;
            background: rgba(4,9,33,0.5);
          }

          .operation-list {
            position: absolute;
            right: 9px;
            top: 6px;

            .operation-item {
              width: 15px;
              height: 15px;
              background-size: 100% 100%;
              margin-left: 12px;

              &.camera {
                background-image: url("~assets/images/btn_camera_nor@2x.png");

                &.active {
                  background-image: url("~assets/images/btn_camera_pre@2x.png");
                }
              }

              &.huanjing {
                background-image: url("~assets/images/btn_huanjing_nor@2x.png");

                &.active {
                  background-image: url("~assets/images/btn_huanjing_pre@2x.png");
                }
              }

              &.location {
                background-image: url("~assets/images/btn_location_nor@2x.png");

                &.active {
                  background-image: url("~assets/images/btn_location_pre@2x.png");
                }
              }

              &.sanwei {
                background-image: url("~assets/images/btn_sanwei_nor@2x.png");

                &.active {
                  background-image: url("~assets/images/btn_sanwei_pre@2x.png");
                }
              }
            }
          }
        }
      }
    }

    .move {
      position: absolute;
      top: calc(50% + 15px);
      transform: translateY(-50%);
      width: 5px;
      height: 10px;
      background-size: 100% 100%;

      &.move-left {
        left: 7px;
        background-image: url("~assets/images/move-left.png");
      }

      &.move-right {
        right: 7px;
        background-image: url("~assets/images/move-right.png");
      }
    }
  }
</style>
